<template>
  <n-grid :x-gap="16" :y-gap="16" :item-responsive="true">
    <n-grid-item span="0:24 640:24 1024:8">
      <n-card title="应用发布" :bordered="false" class="h-full rounded-8px shadow-sm">
        <n-timeline>
          <n-timeline-item v-for="item in timelines" :key="item.type" v-bind="item" />
        </n-timeline>
      </n-card>
    </n-grid-item>
    <n-grid-item span="0:24 640:24 1024:16">
      <n-card title="最近支付" :bordered="false" class="h-full rounded-8px shadow-sm">
        <n-data-table size="small" :columns="columns" :data="tableData" />
      </n-card>
    </n-grid-item>
  </n-grid>
</template>

<script setup lang="ts">
defineOptions({ name: 'DashboardAnalysisBottomPart' });

const { data } = defineProps(['data']);

interface TimelineData {
  type: 'default' | 'info' | 'success' | 'warning' | 'error';
  title: string;
  content: string;
  time: string;
}

interface TableData {
  key: number;
  name: string;
  age: number;
  address: string;
  tags: string[];
}

const timelines: TimelineData[] = data.versionHis.map((record: any) => {
  return {
    type: record.isForce ? 'success' : 'default',
    title: record.versionNo,
    content: record.content,
    time: record.releaseTime
  };
});

const columns = [
  {
    title: '订单编号',
    key: 'id'
  },
  {
    title: '支付者',
    key: 'payer'
  },
  {
    title: '支付数量',
    key: 'amount'
  },
  {
    title: '货币',
    key: 'currency'
  },
  {
    title: '支付时间',
    key: 'updatedAt'
  }
];

const tableData: TableData[] = data.recentPayment;
</script>

<style scoped></style>
